<template>
  <div class="team-classify">
    <!-- 头部 -->
    <div class="route-box">
      <div class="breadcrumb">
        <svg-icon :icon-class="routerInfo?.meta.icon || ''"></svg-icon>
        <div>{{ routerInfo?.meta.title || '' }}</div>
      </div>
      <div class="create_box">
        <el-button type="primary" @click="addClick">
          <i class="el-icon-plus"></i>
          <span class="create_text">{{ $t('teamClassify.addClassify') }}</span>
        </el-button>
      </div>
    </div>

    <!-- 内容 -->
    <section class="content-section">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;">
        <el-table-column prop="name" :label="$t('teamClassify.category')"> </el-table-column>
        <el-table-column prop="createName" :label="$t('teamClassify.creator')"> </el-table-column>
        <el-table-column prop="createTime" :label="$t('teamClassify.createTime')">
        </el-table-column>

        <el-table-column :label="$t('commen.operation')">
          <template #default="scope">
            <el-button @click="editClick(scope.row)" type="primary" size="small">{{ $t('commen.edit') }}</el-button>
            <el-button @click="deleteClick(scope.row)" type="danger" size="small">{{ $t('commen.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination @size-change="sizeChange" @current-change="currentPage" :current-page="page"
        :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </section>

    <!-- 新增分类 -->
    <el-dialog :title="title" v-model="dialogClassify" width="30%" :before-close="handleClose">
      <el-form ref="ruleFormRef" :model="formClassify" label-width="150px" :rules="rules" @submit.native.prevent>
        <el-form-item :label="$t('teamClassify.categoryName')" prop="name">
          <el-input v-model="formClassify.name" :placeholder="$t('teamClassify.plaHold1')"></el-input>
        </el-form-item>
      </el-form>

      <span v-show="['新增分类', '编辑分类'].includes(title)" slot="footer" class="dialog-footer">
        <el-button @click="cancel()">{{ $t('commen.cancel') }}</el-button>
        <el-button type="primary"
          @click="title === $t('teamClassify.addClassify') ? onSubmit(ruleFormRef) : ConfirmEdit()">{{
            $t('commen.confirm')
          }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { apiteamType, apiAddteamType, apiEditteamType, apiDeleteteamType } from '@/api/teamKnowdge/teamclassifyApi'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const router = useRouter()
const routerInfo = ref(router.currentRoute.value)
const tableData = ref([])
const title = ref('')
const ruleFormRef = ref<FormInstance>()
const dialogClassify = ref(false)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const formClassify = reactive({
  name: "",
  id: ""
})
const rules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
  ],
})
onMounted(() => {
  obtainData()
})
const obtainData = () => {
  let oParam = {
    page: page.value - 1,
    size: pageSize.value
  }
  apiteamType(oParam).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.rows
      total.value = res.data.total
    }
  })
}
const addClick = () => {
  dialogClassify.value = true
  title.value = '新增分类'
  formClassify.name = ''
}
const editClick = (row) => {
  dialogClassify.value = true
  title.value = '编辑分类'
  formClassify.name = row.name
  formClassify.id = row.id
}
const deleteClick = (row) => {
  ElMessageBox.confirm('确定删除该分类吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    apiDeleteteamType([row.id]).then((res) => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        obtainData()
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    })
  })
}
const handleClose = () => {
  dialogClassify.value = false
}
const cancel = () => {
  dialogClassify.value = false
  ruleFormRef.value.resetFields()
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let oParam = {
        name: formClassify.name // 只传递name参数
      }
      apiAddteamType(oParam).then((res) => {
        if (res.code == 200) {
          ElMessage.success('添加成功')
          obtainData()
          dialogClassify.value = false
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const ConfirmEdit = () => {
  let oParam = {
    name: formClassify.name, // 只传递name参数
    id: formClassify.id
  }
  apiEditteamType(oParam).then((res) => {
    if (res.code == 200) {
      ElMessage.success('修改成功')
      obtainData()
      dialogClassify.value = false
      formClassify.name = ''
    }
  })
}
const sizeChange = (val) => {
  pageSize.value = val
  obtainData()
}
const currentPage = (val) => {
  page.value = val
  obtainData()
}
</script>

<style lang="scss" scoped>
:deep(.dialog-footer) {
  display: flex;
  justify-content: flex-end;
}

.team-classify {
  width: 100%;
  height: 100%;

  .route-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;

    .breadcrumb {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 15px;

      div {
        margin-left: 8px;
        color: #333;
      }
    }
  }

  .search-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    padding-right: 20px;
    margin-left: 20px;
    border-bottom: 1px solid #eee;

    .inputClass {
      width: 220px;
    }

    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      // background:#F8F8F8;
      cursor: default;

      .el-input__inner {
        cursor: default !important;
      }
    }

    .link-btn {
      background: #f5f5f5;
      border-radius: 22px 22px 22px 22px;
      font-size: 12px;
      padding: 5px 13px;
      color: #666;
      margin-left: 20px;
      cursor: pointer;
    }

    .isActive {
      color: #6698ff;
      background-color: #eff4ff;
    }

    //

    :deep(.link-select) {
      border: 1px solid #909399ad;
      background: #6698ff;
    }
  }

  .content-section {
    padding: 20px;
  }
}
</style>